@import url('./_content/fonts/');

/* Content Layout */
body {
    margin: 0;
}

.header {
    width: auto;
    height: 80px !important;
        padding-bottom: 10px !important;
    
    
    /*margin:auto;*/
}

.header-content {
    height: auto;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;

}

footer {
    margin-top: 25px;
}

/* Full width of the 2 pages */
.fullPage {
    max-width: 1920px;
    /* align-self: center; */
    margin: auto;
}

/* Used in Homepage */

.container {
    width: 736px;
    margin-left: auto;
    margin-right: auto;
}

/* Registration Page Content */
/* Content Layout */
.pageTitle {
    color: var(--highlight-font-color) !important;
    font-family: var(--primary-font-family);
    font-weight: var(--secondary-font-weight);
    font-size: var(--header-font-size);
    font-style: var(--primary-font-style);
    line-height: 40px;
}
.control-group.group-role {
    margin-top: 0;
}
.alertbox, #fromPersonOnlyTextSection, #divResponse {
    width: 736px;
    background-color: var(--primary-bg-color);
    box-sizing: border-box;
    margin: 48px auto;
    border-color: var(--primary-border-config);
    border-radius: var(--highlight-border-radius) !important;
    color: var(--primary-font-color) !important;
    font-family: var(--primary-font-family);
    font-weight: var(--secondary-font-weight);
    font-size: var(--primary-font-size);
    font-style: var(--primary-font-style);
    padding: 10px;
    max-width: 100%;
}

/* Footer Layout */
.footerLeft {
    display: inline-block;
    float: left;
    width: 89%;
    text-align: right;
    padding-top: 20px;
}

.footerLeft a {
    color: var(--primary-font-color) !important;
    font-family: var(--primary-font-family);
    font-weight: var(--primary-font-weight);
    font-size: var(--primary-font-size);
    font-style: var(--primary-font-style);
    line-height: 24px;
    text-decoration: none;
    letter-spacing: 0.15px;
    padding-right: 15px;
}

.footerRight {
    display: inline-block;
    width: 10%;
    float: right;
    color: var(--primary-font-color) !important;
    font-family: var(--primary-font-family);
    font-weight: var(--primary-font-weight);
    font-size: var(--primary-font-size);
    font-style: var(--primary-font-style);
    line-height: 20px;
    letter-spacing: 0.1px;
    font-feature-settings: 'ss03' on;
    padding-top: 22px;
}

/*  Registration Form */
#divRequest, #divResponse, .registration-buttons-section {
    width: 736px !important;
    margin: 0 !important;
    display: flex;
    flex-flow: column;
}div#ucRegistrationForm_0_ModuleCallbackPanel_dynamicFields {
    order: 4;
    display: flex;
}

.control-group.group-message {
    margin: 0;
}

.registration-buttons-section, #divResult {
    margin-top: 10px !important;
}

input[type="text"].dxeEditArea_Material, input[type="password"].dxeEditArea_Material {
    height: 48px;
}

.dxeTextBox_Material, .dxeButtonEdit_Material, .dxeMemo_Material {
    background-color: var(--primary-bg-color);
    border: (--primary-border-config) !important;
    x-font: var(--primary-font-size) var(--primary-font-family);
    -webkit-border-radius: var(--primary-border-radius);
    -moz-border-radius: var(--primary-border-radius);
    -o-border-radius: var(--primary-border-radius);
    -khtml-border-radius: var(--primary-border-radius);
    border-radius: var(--primary-border-radius);
    color: var(--primary-font-color) !important;
    font-family: var(--primary-font-family);
    font-weight: var(--primary-font-weight);
    font-size: var(--primary-font-size);
    font-style: var(--primary-font-style);
    line-height: 20px !important;
}

.dxeMemoEditArea_Material {
    -webkit-border-radius: var(--primary-border-radius) !important;
    -moz-border-radius: var(--primary-border-radius) !important;
    -o-border-radius: var(--primary-border-radius) !important;
    -khtml-border-radius: var(--primary-border-radius) !important;
    border-radius: var(--primary-border-radius) !important;
}

.company-data-header, .requestor-data-header, .more-info-header {
    color: var(--primary-font-color) !important;
    font-family: var(--primary-font-family);
    font-weight: var(--secondary-font-weight);
    font-size: var(--primary-font-size);
    font-style: var(--primary-font-style);
    display: block;
    /* margin-top: 100px; */
    margin-bottom: 50px;
}

.terms-of-use-message {
    margin-bottom: 20px;
}

/* Label spacing with input */
.control-group table {
    margin-top: 6px;
}

div .control-group {
    margin-top: 50px;
    margin-bottom: 50px;
}

/* Hide Input Label*/
.control-group span {
    /*display: none;*/
}



.dxbButton_Material {
    background-color: var(--primary-bg-color);
    mix-blend-mode: normal;
    border-radius: var(--highlight-border-radius);
}

.dxbButton_Material.dxbTSys {
    width: 161px !important;
    height: 40px !important;
    color: var(--primary-font-color) !important;
    font-family: var(--primary-font-family);
    font-weight: var(--secondary-font-weight);
    font-size: var(--primary-font-size);
    font-style: var(--primary-font-style);
    line-height: 24px !important;
    letter-spacing: 0.15px !important;
    text-transform: capitalize !important;
    border: var(--highlight-border-config);
    box-shadow: var(--primary-shadow);
    background: var(--primary-bg-color);
}
    
    .dxbButton_Material.dxbTSys:hover {
    color: var(--invers-font-color) !important;
    box-shadow: var(--primary-shadow);
    background: var(--hover-bg-color);
}

.dxeButtonEditSys .dxeButton, .dxeButtonEditSys .dxeButtonLeft {
    line-height: 100%;
    border-radius: 4px;
}

.dxeEditAreaSys {
    border-radius: 8px !important;
}

.group-title {
    /* width: 352px; */
}

.group-firstName {
    /* width: 352px; */
    /* height: 48px; */
    display: inline-block;
}
.group-address1, .group-firstName {
    /* width: 100% !important; */
}
.group-lastName {
  
}

.group-address1 {
    width: 736px !important;
    margin-left: 0px !important;
}

.group-address2 {
    width: 736px !important;
    margin-left: 20px !important;
}

.group-address3 {
    width: 232px;
    height: 48px;
    display: inline-block;
}

.group-address4 {
    width: 484px;
    height: 48px;
    display: inline-block;
    margin-left: 20px;
}

#ucRegistrationForm_ModuleCallbackPanel_RequestorDataLabel {
    display: block;
}

/* Logo */
.logo {
    width: 272px;
    height: 29px;
    padding-top: 21px;
    padding-left: 10px;
}


/* Homepage Content */
/* Body Layout */
.homecontent {
    position: relative;
    max-width: 1920px;
    min-height: 700px;
    background-color: var(--primary-bg-color);
}

.homecontent img {
    position: relative;
    bottom: 600px;
    display: block;
    height: 700px;
}

.content {
    /*width:100%;*/
    height: 700px;
    margin-right: auto;
    margin-left: auto;
    /* Remove header margin */
    /* height: 645px; */
}    

.homeTitle {
    width: 500px;
    x-height: 104px;
    color: var(--primary-font-color) !important;
    font-family: var(--primary-font-family);
    font-weight: var(--primary-font-weight);
    font-size: var(--header-font-size);
    font-style: var(--primary-font-style);
    line-height: 52px;
}

.homeSubtitle {
    width: 500px;
    height: 100px;
    color: var(--primary-font-color) !important;
    font-family: var(--primary-font-family);
    font-weight: var(--secondary-font-weight);
    font-size: var(--subheader-font-size);
    font-style: var(--primary-font-style);
    line-height: 27px;
}

@media only screen and (min-width: 400px) {
    .languageDisplay {
        padding-bottom: 12px !important;
    }
}

@media only screen and (max-width: 399px) {
    .register {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        margin-left: 0px !important;
        margin-right: 40px !important;
    }
    
    .languageDisplay {
        padding-bottom: 12px !important;
    }
    
    .inlineButtons {
        margin-top: 50px !important;
        width: auto !important;
        height: 100px !important;
    }
}

user agent stylesheet div {
    display: block;
}

@media screen and (min-width: 500px) {
    .homeImage {
        position: relative;
        /* left: 30%; */
        right: 0px;
        top: -501px;
        /* bottom: 18.07%; */
        width: 806px;
        z-index: 0;
        display: inline-block;
        /* float: right; */
    }
    
    a.footer-link {
        float: left;
    }
}

@media screen and (max-width: 500px) {
    .homeImage {
        z-index: 0;
        display: none;
        visibility: hidden;
    }
}

/* Show backgroud image below content */
.front {
    z-index: 1;
    position: relative;
    padding: 20px 50px 50px 50px;
    width: max-content;
    background-color: rgba(255,255,255,0.25);
    height: 530px;
}

/* Under Title Buttons */
.inlineButtons {
    margin-top: 0px !important;
    width: auto;
    height: 66px;
}

.signIn {
    color: var(--primary-font-color) !important;
    background-color: var(--tertiary-color);
    border: var(--highlight-border-config) !important;
}

.signIn a {
    color: var(--invers-font-color);
}
.register {
    margin-left: 30px;
    background-color: var(--secondary-bg-color);
    color: var(--primary-font-color);
    border: var(--highlight-border-config) !important;
}

        
.register a {
    color: var(--invers-font-color);
}

.registerLarge {
    margin-left: 0px;
    background-color: var(--secondary-bg-color);
    color: var(--primary-font-color);
    border: var(--highlight-border-config) !important;
}

.registerLarge a {
    color: var(--invers-font-color);
}

.signIn, .register, .registerLarge {
    display: inline-block;
    box-sizing: border-box;
    font-family: var(--primary-font-family);
    font-weight: var(--secondary-font-weight);
    font-size: var(--primary-font-size);
    font-style: var(--primary-font-style);
    height: 40px;
    padding-left: 25px;
    padding-right: 25px;
    min-width: 120px;
    mix-blend-mode: normal;
    border-radius: var(--highlight-border-radius);
    border: var(--highlight-border-config);
}
    
    .signIn:hover, .register:hover, .registerLarge:hover {
    color: var(--primary-font-color) !important;
    background-color: var(--primary-bg-color) !important;
    display: inline-block;
    box-sizing: border-box;
    font-family: var(--primary-font-family);
    font-weight: var(--secondary-font-weight);
    font-size: var(--primary-font-size);
    font-style: var(--primary-font-style);
    height: 40px;
    padding-left: 25px;
    padding-right: 25px;
    min-width: 120px;
    mix-blend-mode: normal;
    border-radius: var(--highlight-border-radius);
    border: var(--highlight-border-config) !important;
}

    .signIn:hover a, .register:hover a, .registerLarge:hover a {
    color: var(--primary-font-color) !important;
}
    
.homecontent a {
    display: flex;
    align-content: space-between;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
    text-decoration: none;
}



/* Below buttons */
.buttonsBottom {
    margin-top: 60px;
    width: auto;
    height: 66px;
}

.buttonsBottom p {
    color: var(--primary-font-color) !important;
    font-family: var(--primary-font-family);
    font-weight: var(--secondary-font-weight);
    font-size: var(--secondary-font-size);
    font-style: var(--primary-font-style);
    line-height: 24px;
    letter-spacing: 0.15px;
    font-feature-settings: 'ss03' on;
    width: fit-content;
    height: 24px;
}

.button-back-cell {
    margin-right: 20px;
}

/* CSS for Response Info */
#divResponse img, #ucRegistrationForm_lbRegistrationHeader {
    display: none !important;
}

#divResponse {
    border: var(--primary-bg-config);
}

.control-group.caption-right .control-label {
    margin-top: 6px !important;
}

@media only screen and (max-width: 800px) {
    .content, .fullPage, .header-content, .alternateheader, .pageTitle, .alertbox, .header {
        max-width: 100vw;
        width: 100%;
        overflow:
        clip;
    }
div#divRequest {
    display: flex;
    flex-flow: column nowrap;
    order: 1;
}
   #ucRegistrationForm_0_ModuleCallbackPanel_dynamicFields{
    display: flex;
    flex-flow: column nowrap;
    order: 4;
    /* margin: 0; */
    }
.control-group.group-message{
    display: flex;
    flex-flow: column nowrap;
    order: 3;
    }
    
    .person-info {
    display: flex;
    flex-flow: column nowrap;
    order: 1;
}
    .homecontent {
        max-width: 100vw;
        width: 100%;
    }
    
    .alertbox {
        width: 100%;
        margin: 0;
    }
    
    .content {
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 1.5rem;
    }
    
    .logo {
        margin-left: 7%;
    }
    
    .homeSubtitle {
        width: calc(100% - 30px);
    }
    
    .buttonsBottom {
        margin-top: 0px;
    }
    
    .homeTitle {
        width: calc(100% - 30px);
        height: auto;
        color: var(--primary-font-color) !important;
        font-family: var(--primary-font-family);
        font-weight: var(--secondary-font-weight);
        font-size: var(--highlight-font-size);
        font-style: var(--primary-font-style);
        line-height: 52px;
    }
    
    .homeImage {
        width: 366px;
        top: -253px;
    }
    
    .signIn {
        width: 80px;
        height: 40px;
    }
    
    .register {
        display: inline-block;
        x-width: 160px;
        height: 40px;
        margin-left: 10px;
    }
    
    .signIn, .register, .registerLarge {
        color: var(--primary-font-color) !important;
        font-family: var(--primary-font-family);
        font-weight: var(--secondary-font-weight);
        font-size: var(--primary-font-size);
        font-style: var(--primary-font-style);
        line-height: 24px;
    }
    
    .registerLarge {
        x-width: 211px;
        height: 40px;
        box-sizing: border-box;
        background-color: var(--secondary-bg-color);
        border: var(--highlight-border-config) !important;
        border-radius: var(--highlight-border-config) !important;
        margin-top: 10px;
    }
    

.registerLarge a {
    color: var(--invers-font-color);
}

    
    
    .control-group {
        width: 100%;
        margin: 12px 0 0 0 !important;
        height: auto;
        float: none;
    }
    
    .group-firstName {
        /* height: 28px; */
        /* display: block; */
        width: 100% !important;
}
    .company-data-header, .requestor-data-header, .more-info-header {
  
    margin-top: 12px;
    margin-bottom: 12px;
}
    .group-lastName {
        /* height: 68px; */
        display: block;
        margin-left: 0;
        /* min-width: 100% !important; */
        width: 100% !important;
    }
    
    .group-address3 {
        height: 28px;
        display: block;
    }
    
    .group-address4 {
        height: 28px;
        display: block;
        margin-left: 0;
    }
    
    #divRequest {
        width: 100% !important;
        margin: 10px;
        padding-top: 20px;
    }
    
    .registration-buttons-section {
        width: 100%!important;
    }
    
    .container {
        width: 90vw;
        margin: 10px;
        padding: 0 10px;
        max-width: 100vw;
    }
    
    .group-message {
        width: 100%;
    }
    
    textarea#ucRegistrationForm_ModuleCallbackPanel_smb_Message_I {
        width: 95% !important;
    }
}

@media only screen and (min-width: 1200px) {
}

@media only screen and (max-width: 1199px) {
    .content, .homecontent, .fullPage, .header-content, .alternateheader, .pageTitle, .alertbox, .header {
        max-width: 100vw;
        /* margin-bottom: 10px; */
    }
    
    .footerLeft {
        display: inline-block;
        float: left;
        width: 80%;
    }
    
    .footer {
        height: 150px;
    }
    
    a.footer-link {
        text-decoration: underline;
    }
    
    a.footer-link:active, a.footer-link:hover {
        border-bottom: var(--primary-border-config) !important;
        text-decoration: none !important;
    }
}

/* Footer Layout */
.footer {
    width: 100%;
    max-width: 1920px;
    height: 121px;
    background-color: var(--primary-bg-color);
}

/* Footer Layout */
.footerLeft {
    display: inline-block;
    float: left;
    width: 89%;
    text-align: right;
    padding-top: 19px;
}

.footer {
    display: flex;
    align-content: flex-end;
    justify-content: safe flex-end;
}

.footer .footerLeft {
    width: auto;
}

.footerLeft a {
    color: var(--primary-font-color) !important;
    font-family: var(--primary-font-family);
    font-weight: var(--primary-font-weight);
    font-size: var(--primary-font-size);
    font-style: var(--primary-font-style);
    line-height: 24px;
    text-decoration: none;
    letter-spacing: 0.15px;
    padding-right: 15px;
}

.footerRight {
    display: inline-block;
    width: 20%;
    float: right;
    color: var(--primary-font-color) !important;
    font-family: var(--primary-font-family);
    font-weight: var(--primary-font-weight);
    font-size: var(--primary-font-size);
    font-style: var(--primary-font-style);
    line-height: 20px;
    letter-spacing: 0.1px;
    font-feature-settings: 'ss03' on;
    padding-top: 22px;
}#ucRegistrationForm_0_ModuleCallbackPanel_dynamicFields
.control-group.group-message {
     margin: 0 0 20px 0 !important;
}.control-group .dxeBase_Material {display:inline-block; margin-bottom:6px;}

.control-group table {margin:0;}